<template>
  <div>
    <h1>MyChild</h1>
    <button @click="father()">向父级传参</button>
    <input type="text" v-model.lazy="data">
    <!-- <button v-on:click="upText()">传text</button> -->
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:''
        }
    },
    props:{
        //props中不可修改
        //this.title="xxx" 错
        // text:{
        //     type:String,
        //     default:"默认值"
        // },
        // title:{
        //     type:Number,
        //     required:true  //必传属性
        // },
        // text:{
        //     type:Object,
        //     required:true,
        //     default:()=>{
        //         return{

        //         }
        //     }
        // },
         text:{
            type:Array,
            required:true,
            default:()=>{
                return[]
            }
        },
    },
    methods:{
        father(){
            console.log('1111')
            // this.$emit('自定义事件的名字',"要传递过去的参数")
            this.$emit('back',12321)
        },
        // upText(){
        //     this.$emit('back2',this.data)
        // }
    },
    watch:{
        data(){
          this.$emit('back2',this.data)  
        }
    },
    created(){
        console.log(this.text)
    }
}
// 在js操作中对象时引用数据类型当多个页面引用同一组件时，只要其中一个也面对对象进行操作，那么他会同时影响其他文件，因为他们操作的是同一对象，那么我们将data定义成一个函数返回一个对象，那么当有页面引入该组件时，每次都会返回一个新对象，这样页面与页面之间才不会互相产生影响
</script>

<style>

</style>